<div class="overflow-x-auto">
  <table class="gf-table w-100" mat-table [dataSource]="dataSource">
    <ng-container matColumnDef="alias">
      <th *matHeaderCellDef class="px-1" i18n mat-header-cell>Alias</th>
      <td *matCellDef="let element" class="px-1" mat-cell>
        {{ element.alias }}
      </td>
    </ng-container>

    <ng-container matColumnDef="grantee">
      <th *matHeaderCellDef class="px-1" i18n mat-header-cell>Grantee</th>
      <td *matCellDef="let element" class="px-1" mat-cell>
        {{ element.grantee }}
      </td>
    </ng-container>

    <ng-container matColumnDef="type">
      <th *matHeaderCellDef class="px-1" i18n mat-header-cell>Permission</th>
      <td *matCellDef="let element" class="px-1 text-nowrap" mat-cell>
        <div class="align-items-center d-flex">
          @if (element.permissions.includes('READ')) {
            <ion-icon class="mr-1" name="lock-open-outline" />
            <ng-container i18n>View</ng-container>
          } @else if (element.permissions.includes('READ_RESTRICTED')) {
            <ion-icon class="mr-1" name="lock-closed-outline" />
            <ng-container i18n>Restricted view</ng-container>
          }
        </div>
      </td>
    </ng-container>

    <ng-container matColumnDef="details">
      <th *matHeaderCellDef class="px-1" i18n mat-header-cell>Details</th>
      <td *matCellDef="let element" class="px-1 text-nowrap" mat-cell>
        @if (element.type === 'PUBLIC') {
          <div class="align-items-center d-flex">
            <ion-icon class="mr-1" name="link-outline" />
            <a target="_blank" [href]="getPublicUrl(element.id)">{{
              getPublicUrl(element.id)
            }}</a>
          </div>
          @if (user?.settings?.isExperimentalFeatures) {
            <div>
              <code
                >GET {{ baseUrl }}/api/v1/public/{{
                  element.id
                }}/portfolio</code
              >
            </div>
          }
        }
      </td>
    </ng-container>

    <ng-container matColumnDef="actions" stickyEnd>
      <th *matHeaderCellDef class="px-1 text-center" mat-header-cell></th>

      <td *matCellDef="let element" class="px-1 text-center" mat-cell>
        <button
          class="mx-1 no-min-width px-2"
          mat-button
          [matMenuTriggerFor]="accessActionsMenu"
          (click)="$event.stopPropagation()"
        >
          <ion-icon name="ellipsis-horizontal" />
        </button>
        <mat-menu
          #accessActionsMenu="matMenu"
          class="no-max-width"
          xPosition="before"
        >
          @if (user?.settings?.isExperimentalFeatures) {
            <button mat-menu-item (click)="onUpdateAccess(element.id)">
              <span class="align-items-center d-flex">
                <ion-icon class="mr-2" name="create-outline" />
                <span><ng-container i18n>Edit</ng-container>...</span>
              </span>
            </button>
          }
          @if (element.type === 'PUBLIC') {
            <button mat-menu-item (click)="onCopyUrlToClipboard(element.id)">
              <span class="align-items-center d-flex">
                <ion-icon class="mr-2" name="copy-outline" />
                <span i18n>Copy link to clipboard</span>
              </span>
            </button>
          }
          @if (
            user?.settings?.isExperimentalFeatures || element.type === 'PUBLIC'
          ) {
            <hr class="my-0" />
          }
          <button mat-menu-item (click)="onDeleteAccess(element.id)">
            <span class="align-items-center d-flex">
              <ion-icon class="mr-2" name="remove-circle-outline" />
              <span i18n>Revoke</span>
            </span>
          </button>
        </mat-menu>
      </td>
    </ng-container>

    <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
    <tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
  </table>
</div>
